<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

/* 

        长度单位:
            像素
                -屏幕(显示器)实际上是由一个个的小点构成的
                -不同的屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
                -所以同样的200px在不同的设备下效果是不一样的

            百分比
                -也可以讲属性值设置为相对于其父元素属性百分比
                -设置百分比可以使元素跟随父元素的改变而改变

            em
                -em是相对于元素的字体大小来计算的
                -1em = 1font-size
                -em会根据字体大小的改变而改变

            rem(以后使用,会使用到大量的rem!)
                -rem是根据与根元素的字体大小来计算 
                






*/

.box1{
        width: 500px;
        height: 500px;
        background-color: skyblue;
}

.box2{
        width: 50%;
        height: 50%;
        background-color: cornsilk;
}

.box3{
        width: 600em;
        height: 600em;
        background-color:cyan;
}

.box4{
        width: 1rem;
        height: 1rem;
        background-color:darkorchid;
}

    </style>
</head>
<body>
    
        <div class="box1">
            <div class="box2"></div>
                

        </div>
        <div class="box3">
            <div class="box4"></div>
        </div>

</body>
</html>